<template>
  <div class="contaniner">
    <i name="tabs" class="el-icon-d-arrow-left" @click="leftmove"></i>
    <div
      class="toolbar"
      :style="{
        width: getToolData.length * 130 + 'px',
        'margin-left': xxx * 100 + 'px',
      }"
    >
      <!-- //左箭头 -->
      <el-tag
        class="toolItem"
        type="info"
        :disable-transitions="false"
        :closable="item.id != 0"
        effect="plain"
        v-for="(item, index) in getToolData"
        :key="index"
        :class="{ active: $route.path == item.detail }"
        @click="redirect(item)"
        @close="closeToolItem(item, index)"
      >
        <span class="dot" v-if="$route.path == item.detail"></span>
        {{ item.name }}
      </el-tag>
    </div>
    <i
      @click="closeAll(item)"
      class="el-icon-circle-close"
      style="position: absolute;right: 26px;top: 8px;"
    ></i>
    <i name="tabs" class="el-icon-d-arrow-right" @click="rightmove"></i>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "tabar",
  data() {
    return {
      xxx: 0,
      isLogistics: JSON.parse(sessionStorage.getItem("limit")).menuTreeList[0]
        .name,
    };
  },
  computed: {
    ...mapGetters(["getToolData", "getCacheView"]),
  },
  updated() {
    if (!this.getToolData.length && this.isLogistics == "首页") {
      this.$router.push({ path: "/home" });
    } else if (!this.getToolData.length && this.isLogistics == "物流首页") {
      this.$router.push({ path: "/logisticsIndex" });
    }else if(!this.getToolData.length && this.isLogistics =="会员首页"){
       this.$router.push({ path: "/dashboard" });
    }
  },
  methods: {
    leftmove() {
      if (this.xxx < 0) {
        this.xxx += 1;
      }
    },
    rightmove() {
      if (this.getToolData.length > 6) {
        if (this.xxx > -(this.getToolData.length + this.xxx)) {
          this.xxx -= 1;
        }
      }
    },
    closeToolItem(item, index) {
      let tempIndex = this.getToolData.findIndex((v) => {
        if (this.$route.fullPath.indexOf("?") != -1) {
          return this.$route.fullPath.split("?")[0] == v.detail;
        } else {
          return this.$route.fullPath == v.detail;
        }
      });
      this.$store.dispatch("clearToolBar", item);
      this.$store.dispatch("clearCache", item.componentName);
      if (
        this.getToolData.length >= 1 &&
        this.getToolData.length === tempIndex &&
        tempIndex < index
      ) {
        this.$router.push({
          path: this.getToolData[index - 1].detail,
        });
      } else {
        if (
          this.getToolData.length &&
          !(this.getToolData.length >= tempIndex)
        ) {
          this.$router.push({
            path: this.getToolData[this.getToolData.length - 1].detail,
          });
        }
      }
      if (tempIndex == index && this.getToolData.length >= 1) {
        this.$router.push({
          path: this.getToolData[this.getToolData.length - 1].detail,
        });
      }
    },
    redirect(item) {
      if (item.componentName === "addStorage") {
        this.$store.commit("updateTabStorage", true);
      }

      this.$router.push({ path: item.detail });
    },
    closeAll() {
      this.$store.commit("closeTar");
    },
  },
};
</script>

<style scoped lang="scss">
.toolbar {
  width: 100%;
  overflow-x: scroll; /*添加横向滚动条*/
  white-space: nowrap; /*不换行*/
  display: inline-block;
  padding: 0 12px;
  transition: all linear 0.5s;
  padding-left: 45px;
}
/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
.toolbar::-webkit-scrollbar {
  display: none;
}
/*兼容火狐*/
.toolbar {
  scrollbar-width: none;
}
/* 兼容IE10+ */
.toolbar {
  -ms-overflow-style: none;
}
/deep/.dot {
  background: #409eff;
  width: 6px;
  display: inline-block;
  height: 6px;
  border-radius: 50%;
  margin-right: 3px;
  border: 1px solid transparent;
}
/deep/.el-tag .el-icon-close {
  display: block;
  color: #909399;
}
/deep/.el-tag .el-icon-close {
  color: #909399;
  display: inline-block;
}
/deep/.el-tag--plain.el-tag--info {
  background-color: #fff;
  border: 1px solid transparent;
  text-align: center;
  color: #696c70;
  // margin-right: 10px;
}
.active {
  border-top: 1px solid #999 !important;
}
/deep/.el-tag--plain.el-tag--info:hover {
  cursor: pointer;
}
/deep/.el-icon-d-arrow-right {
  position: absolute;
  top: 8px;
  right: 0px;
  background: #fff;
  padding-right: 8px;
  z-index: 100;
}
.el-icon-d-arrow-left {
  position: absolute;
  top: 8px;
  left: 0px;
  background: #fff;
  padding-left: 8px;
  z-index: 100;
}
</style>
